<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="content">
				<view class="custom-title">打卡列表</view>
			</block>
		</cu-custom>
		<view class="clock-content" v-if="clockList.length>0">
			<view v-for="(item,index) in clockList" :key="index" class="clock-list-content" 
				:style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/dkInputBg.png)'}]">
				<view class="padding-32">
					<view class="flex align-center justify-start">
						<view>
							<image :src="item.avatar" style="border-radius: 50%;" class="img-100"></image>
						</view>
						<view class="padding-left-24">
							<view class="name">{{item.nickname}}</view>
							<view class="dept">品牌部</view>
						</view>
					</view>
					<view class="padding-top-48 content text-df">周一工厂打卡！！！</view>
					<view class="padding-top-xl">
						<image src="https://txr001.zthj.net/static/img/time.png" class="img-32 text-img-center"></image>
						<text class="padding-left-16 content text-sm">时间</text>
						<text class="padding-left-28 content text-sm">{{item.content[0]}}</text>
					</view>
					<view class="padding-top-18">
						<image src="https://txr001.zthj.net/static/img/address.png" class="img-32 text-img-center">
						</image>
						<text class="padding-left-16 content text-sm">地点</text>
						<text class="padding-left-28 content text-sm">{{item.content[2].address}}</text>
					</view>
				</view>
				<view class="padding-left-32 flex align-center justify-start" style="overflow-x: scroll;">
					<view class="margin-right-32" v-for="(pic,index) in item.content[1]" :key="index">
						<image :src="pic" class="img-280"></image>
					</view>
				</view>
			</view>

			
		</view>
		<view v-else >
			<u-empty text="暂无打卡数据!" margin-top="400" mode="list"></u-empty>
		</view>
		<view class="footer">
			<button class="cu-btn clock-btn" @click="goPage('/pages/clock/clock?s_id='+s_id,true)">打卡</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clockList: [],
				s_id: 0,
				date: ''
			}
		},
		onLoad(params) {
			if (params.s_id) {
				this.s_id = params.s_id;
				this.date = params.date;
				this.getList();
			}
		},
		methods: {
			getList: async function() {
				let res = await this.$api.getClockList({
					s_id: this.s_id,
					date: this.date
				})
				this.clockList = res;
				// console.log(res);
			}
		}
	}
</script>

<style scoped lang="less">
	.clock-content {
		margin: 48rpx 32rpx;

		.clock-list-content {
			background-size: 100% 100%;
			width: 100%;
			height: 744rpx;
			margin-bottom: 32rpx;
		}

		.name {
			font-size: 28rpx;
			font-weight: 400;
			color: #010101;
			vertical-align: middle;
		}

		.dept {
			font-size: 24rpx;
			color: #010101;
			padding-top: 12rpx;
		}

		.content {
			font-weight: 400;
			color: #000000;
		}
	}

	.footer {
		padding: 0 32rpx;
		position: fixed;
		width: 100%;
		bottom: 100rpx;
	}

	.clock-btn {
		height: 100rpx;
		line-height: 100rpx;
		background: #24458E;
		box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 48rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 100%;
	}
</style>